<template>
  <div>
    <div v-if="this.active === '1'">
      <search-style ref="searchStyle"/>
    </div>

    <div v-if="this.active === '2'">
      <table-style ref="tableStyle" />
    </div>
    <div v-if="this.active === '3'">
			<detail-style ref="detailStyle" />
    </div>
    <div v-if="this.active === '4'">

    </div>
    <div v-if="this.active === '5'">
      <dept-show-style />
    </div>
    <footer-tool-bar>
      <a-button @click="() => {this.$router.go(-1);}" type="cancel">返回</a-button>
    </footer-tool-bar>
  </div>
</template>

<script>
import FooterToolBar from '@/components/FooterToolbar'
import searchStyle from './SearchStyle'
import tableStyle from './TableStyle'
import detailStyle from './DetailStyle'
import DeptShowStyle from './DeptShowStyle'

export default {
  name: 'Index',
  components: {
    FooterToolBar,
    searchStyle,
    tableStyle,
    detailStyle,
    DeptShowStyle
  },
  data () {
    return {
      tabs: {
        items: [
          {
            key: '1',
            title: '搜索条件'
          },
          {
            key: '2',
            title: '表格'
          },
          {
            key: '3',
            title: '详情展示'
          },
          {
            key: '4',
            title: '树目录表格'
          },
          {
            key: '5',
            title: '部门展示'
          }
        ],
        active: () => {
          return this.active
        },
        callback: (e) => {
          this.active = e
        }
      },
      active: '1'
    }
  }
}
</script>

<style scoped>

</style>
